<template>
  <a-modal
    :visible="visible"
    title="确认删除"
    @ok="$emit('confirm')"
    @cancel="$emit('update:visible', false)"
    @visible-change="handleVisibleChange"
    :ok-text="'确认删除'"
    :cancel-text="'取消'"
    :ok-button-props="{ status: 'danger' }"
    modal-class="delete-confirm-modal"
  >
    <div class="delete-confirm-content">
      <div class="delete-icon">
        <icon-exclamation-circle-fill />
      </div>
      <div class="delete-info">
        <h3>您确定要删除该分类吗？</h3>
        <p>删除后数据将无法恢复，请谨慎操作。</p>
        <p v-if="category" class="category-info">
          <span>分类ID: {{ category.id }}</span>
          <span>分类名: {{ category.name || '未设置' }}</span>
        </p>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { CategoryRecord } from '@/api/category'
import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon'

// 定义组件属性
const props = defineProps<{
  visible: boolean
  category: CategoryRecord | null
}>()

// 定义组件事件
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'confirm'): void
}>()

// 处理对话框可见性变化
const handleVisibleChange = (val: boolean) => {
  emit('update:visible', val)
}
</script>

<style scoped lang="less">
@import '../styles/common.less';

:deep(.delete-confirm-modal) {
  .arco-modal-header {
    border-bottom: 1px solid #f2f3f5;
    padding-bottom: 12px;
  }

  .arco-modal-footer {
    border-top: 1px solid #f2f3f5;
    padding-top: 12px;
  }
}

.delete-confirm-content {
  display: flex;
  padding: 16px 0;

  .delete-icon {
    font-size: 48px;
    color: #f53f3f;
    margin-right: 16px;
    display: flex;
    align-items: center;
  }

  .delete-info {
    flex: 1;

    h3 {
      margin: 0 0 8px 0;
      font-size: 16px;
      color: #1d2129;
    }

    p {
      margin: 0 0 8px 0;
      color: #4e5969;
      font-size: 14px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .category-info {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px dashed #e5e6eb;

      span {
        margin-right: 16px;
        font-weight: 500;
      }
    }
  }
}
</style>
